
import {createContext, useContext} from 'react'


/**
 * 使用Context机制跨层级组件传递:
 * 跨层组件：
 *  不是直接的父子关系，而是这两个组件之间还嵌套了其他组件
 *  比如：    A>B>C(A为B的父组件，B为C的父组件，A和C之间就是跨层组件)
 *  
 */

function A(props){

  return(
    <div>
      <B/>
    </div>
  )
}

function B(props){
  const getMsg = useContext(MsgCtx)
  return(
    <div>
      {getMsg}
    </div>
  )
}


/**
 * 实现步骤：
 *  1.使用createContext方法创建一个上下文对象Ctx
 *  2.在顶层组件（App）通过Ctx.Provide组件提供数据
 *  3.在底层组件（B）中通过useContext钩子函数获取数据
 */


const MsgCtx = createContext()




function App() {
  const msg = "App msg"
  return (
    <div>
      <MsgCtx.Provider value={msg}>
        <A/>
      </MsgCtx.Provider>
    </div>
  )
}

export default App;
